<template>
	<view style="padding-top: 28rpx;">
		<view class="qiun-columns" style="background: #FEF8EA;">
			<view class="top">
				<view class="icon2"></view>
				<view class="right">
					<view class="cut" style="margin-left: 0;" @click="site=true,params.month=false,params.year=true">
						{{year}}年
						<image src="../static/xia.png"></image>
					</view>
					<view class="cut2" @click="site=true,params.month=true,params.year=false">
						{{month}}月
						<image src="../static/xia.png"></image>
					</view>
					<view class="cut" @click="show=true">
						{{week}}周
						<image src="../static/xia.png"></image>
					</view>
				</view>
			</view>
			<view class="qiun-charts">
				<!--#ifdef MP-ALIPAY -->
				<canvas canvas-id="canvasLineB" id="canvasLineB" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
				 :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineB" @touchend="touchEndLineB"></canvas>
				<!--#endif-->
				<!--#ifndef MP-ALIPAY -->
				<canvas canvas-id="canvasLineB" id="canvasLineB" class="charts" @touchstart="touchLineB" @touchend="touchEndLineB"></canvas>
				<!--#endif-->
			</view>
		</view>
		<view class="qiun-columns" style="background: #FEEBEA;">
			<view class="top">
				<view class="icon"></view>
				<view class="right">
					<view class="cut" @click="site=true">
						{{year}}年
						<image src="../static/xia.png"></image>
					</view>
				</view>
			</view>
			<view class="qiun-charts">
				<!--#ifdef MP-ALIPAY -->
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
				 :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineA" @touchend="touchEndLineA"></canvas>
				<!--#endif-->
				<!--#ifndef MP-ALIPAY -->
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA" @touchend="touchEndLineA"></canvas>
				<!--#endif-->
			</view>
			<u-picker v-model="site" mode="time" :params="params" :endYear="endYear" @confirm="confirm"></u-picker>
			<u-select v-model="show" :list="list" @confirm="select"></u-select>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var than;
	var canvaLineA = null;
	var canvaLineB = null;
	var lastMoveTime = null; //最后执行移动的时间戳
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				Interactive: '',
				list: [],
				params: {
					year: true,
					month: false,
					day: false
				},
				site: false,
				show: false,
				year: "",
				month: "",
				type: "",
				name: "",
				week: "",
				uid: ""
			}
		},
		onLoad(o) {
			than = this;
			than.type = o.type;
			than.year = than.endYear;
			than.month = than.getNowFormatDate().substring(5, 7);
			than.name = o.name;
			if (o.uid) {
				than.uid = o.uid;
			}
			this.cWidth = uni.upx2px(619);
			this.cHeight = uni.upx2px(407);
			for (let i = 1; i <= than.weekInMonthCount(); i++) {
				than.list.push({
					value: i,
					label: i
				})
			}
			this.getData();
			this.getData2();
		},
		methods: {
			weekInMonthCount() {
				//获取当前月一共几周
				var date = new Date((new Date(this).setDate(1)) || (new Date()).setDate(1));
				var firstWeekDate;
				var x = than.getNowFormatDate().substring(8, 10);
				var y = "";
				if (date.getDay() === 1) {
					firstWeekDate = 0;
					y = Math.ceil(x / 7);
				} else {
					firstWeekDate = than.sub(7, date.getDay());
					y = Math.ceil(than.sub(x, than.sub(7, date.getDay())) / 7);
				}
				than.week = y;
				date.setMonth(date.getMonth() + 1);
				date.setDate(0);
				var monthHasDays = date.getDate() - firstWeekDate;
				if (date.getDate() == 28) {
					monthHasDays = monthHasDays + 1;
				}
				return Math.ceil(monthHasDays / 7);
			},
			select(e) {
				than.week = e[0].label;
				than.changeData2();
			},
			confirm(e) {
				for (let i in e) {
					if (i == 'year') {
						than.year = e.year
					} else {
						than.month = e.month
					}
				}
				than.changeData()
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: than,
					canvasId: canvasId,
					type: 'line',
					colors: ['#facc14'],
					padding: [15, 15, 0, 15],
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: than.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					width: than.cWidth * than.pixelRatio,
					height: than.cHeight * than.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});

			},
			showLineB(canvasId, chartData) {
				canvaLineB = new uCharts({
					$this: than,
					canvasId: canvasId,
					type: 'line',
					colors: ['#facc14'],
					padding: [15, 15, 0, 15],
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: than.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					width: than.cWidth * than.pixelRatio,
					height: than.cHeight * than.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});

			},
			touchLineA(e) {
				lastMoveTime = Date.now();
			},
			touchLineB(e) {
				lastMoveTime = Date.now();
			},
			moveLineA(e) {
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime;
				if (duration < Math.floor(1000 / 60)) return; //每秒60帧
				lastMoveTime = currMoveTime;

				let currIndex = canvaLineA.getCurrentDataIndex(e);
				if (currIndex > -1 && currIndex < canvaLineA.opts.categories.length) {
					let riqi = canvaLineA.opts.categories[currIndex];
					let leibie = canvaLineA.opts.series[0].name;
					let shuju = canvaLineA.opts.series[0].data[currIndex];
					this.Interactive = leibie + ':' + riqi + '-' + shuju + '元';
				}
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			touchEndLineA(e) {
				let currIndex = canvaLineA.getCurrentDataIndex(e);
				if (currIndex > -1 && currIndex < canvaLineA.opts.categories.length) {
					let riqi = canvaLineA.opts.categories[currIndex];
					let leibie = canvaLineA.opts.series[0].name;
					let shuju = canvaLineA.opts.series[0].data[currIndex];
					this.Interactive = leibie + ':' + riqi + '-' + shuju + '元';
				}
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			getData() {
				than.post("api/teamhead/" + than.type, {
					year: than.year,
					view_type: 'year',
					uid: than.uid
				}, function(data) {
					var LineA = {
						categories: [],
						series: [{
							name: than.name,
							data: []
						}]
					}
					for (let i in data) {
						var month_number = data[i].month_number
						var number = data[i].number
						LineA.categories.push(month_number)
						LineA.series[0].data.push(number)
					}
					var serverData = [{
						opts: LineA,
						chartType: "line"
					}];
					than.showLineA("canvasLineA", LineA);
				})
			},
			changeData() {
				than.post("api/teamhead/" + than.type, {
					year: than.year,
					view_type: 'year',
					uid: than.uid
				}, function(data) {
					var LineA = {
						categories: [],
						series: [{
							name: than.name,
							data: []
						}]
					}
					for (let i in data) {
						var month_number = data[i].month_number
						var number = data[i].number
						LineA.categories.push(month_number)
						LineA.series[0].data.push(number)
					}
					var serverData = [{
						opts: LineA,
						chartType: "line"
					}];
					canvaLineA.updateData({
						series: LineA.series,
						categories: LineA.categories
					});
				})
			},
			touchEndLineB(e) {
				let currIndex = canvaLineB.getCurrentDataIndex(e);
				if (currIndex > -1 && currIndex < canvaLineB.opts.categories.length) {
					let riqi = canvaLineB.opts.categories[currIndex];
					let leibie = canvaLineB.opts.series[0].name;
					let shuju = canvaLineB.opts.series[0].data[currIndex];
					this.Interactive = leibie + ':' + riqi + '-' + shuju + '元';
				}
				canvaLineB.touchLegend(e);
				canvaLineB.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			getData2() {
				than.post("api/teamhead/" + than.type, {
					year: than.year,
					view_type: 'week',
					month: than.month,
					week: than.week,
					uid: than.uid
				}, function(data) {
					var LineA = {
						categories: [],
						series: [{
							name: than.name,
							data: []
						}]
					}
					for (let i in data) {
						var date_number = data[i].date_number + "号"
						var number = data[i].number
						LineA.categories.push(date_number)
						LineA.series[0].data.push(number)
					}
					var serverData = [{
						opts: LineA,
						chartType: "line"
					}];
					than.showLineB("canvasLineB", LineA);
				})
			},
			changeData2() {
				than.post("api/teamhead/" + than.type, {
					year: than.year,
					view_type: 'week',
					month: than.month,
					week: than.week,
					uid: than.uid
				}, function(data) {
					var LineA = {
						categories: [],
						series: [{
							name: than.name,
							data: []
						}]
					}
					for (let i in data) {
						var date_number = data[i].date_number + "号"
						var number = data[i].number
						LineA.categories.push(date_number)
						LineA.series[0].data.push(number)
					}
					var serverData = [{
						opts: LineA,
						chartType: "line"
					}];
					canvaLineB.updateData({
						series: LineA.series,
						categories: LineA.categories
					});
				})
			}
		}
	}
</script>

<style lang="less">
	.qiun-columns {
		width: 678rpx;
		margin: auto;
		padding-bottom: 28rpx;
		margin-bottom: 28rpx;
	}

	page {
		background: #F4F4F7;
	}

	.top {
		display: flex;
		align-items: center;
		height: 122rpx;
		padding: 0 33rpx;

		.icon {
			width: 26rpx;
			height: 25rpx;
			background: #EF3E3E;
			border-radius: 50%;
		}

		.icon2 {
			width: 26rpx;
			height: 25rpx;
			background: #F8C127;
			border-radius: 50%;
		}

		.right {
			margin-left: auto;
			display: flex;
			align-items: center;

			.cut {
				width: 180rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				justify-content: center;
				margin-left: 30rpx;

				image {
					margin-left: 15rpx;
					width: 24rpx;
					height: 14rpx;
				}
			}

			.cut2 {
				height: 64rpx;
				padding: 0 20rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				justify-content: center;
				margin-left: 30rpx;

				image {
					margin-left: 15rpx;
					width: 24rpx;
					height: 14rpx;
				}
			}
		}
	}

	.qiun-charts {
		width: 619rpx;
		height: 407rpx;
		margin: auto;
		background-color: #FFFFFF;

	}

	.charts {
		width: 619rpx;
		height: 407rpx;
		background-color: #FFFFFF;
	}
</style>
